<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>统计页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet"
          th:href="@{/resource/xadmin/css/font.css}">
    <link rel="stylesheet"
          th:href="@{/resource/xadmin/css/xadmin.css}">
    <link rel="stylesheet"
          th:href="@{/resource/layui/css/layui.css}">
    <script type="text/javascript"
            th:src="@{/resource/js/jquery-3.6.0.min.js}"></script>
    <script
            th:src="@{/resource/layui/layui.js}"
            charset="utf-8"></script>
    <script type="text/javascript"
            th:src="@{/resource/xadmin/js/xadmin.js}"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">最新一周订单数量</div>
        <div class="layui-card-body" style="min-height: 580px;">
            <div id="myChart" class="layui-col-sm12" style="height: 580px;"></div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script type="text/javascript" th:inline="javascript">

    //$.post("getStatisticsData");
    var DataString = [[${Data}]];
    var DataArr = DataString.split(",");
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myChart'));

    // 指定图表的配置项和数据
    var option = {
        grid: {
            top: '5%',
            right: '1%',
            left: '1%',
            bottom: '10%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '订单量',
            data: DataArr,
            type: 'line',
            smooth: true
        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>
